<template>
  <!--//修改颜色-->
  <div style="padding: 5px;margin-top: 10px;  border: 2px solid rgba(77, 86, 103, 0.8);
      box-shadow: -1px 0px 11px 9px rgba(77, 86, 103, 0.3) inset;">
    <div id="mmm" class="echart-test"></div>
  </div>


</template>

<script>
  import echarts from 'echarts'
  import {mapGetters} from 'vuex';
  export default {
    name: "TemperatureChart",
    computed: {
      ...mapGetters(['plcData','ScreenWidth'])
    },
    data() {
      return {
        echartsA: null
      }
    },
    watch: {
      'ScreenWidth': function (newVal) {
        this.echartsA.resize();
      },
      'plcData.od':function(newVal){
        //判断
        let plcDeviceStatus = this.plcData.od;
        let plcDevicesOxStatus = this.plcData.oxd;
        if (plcDeviceStatus >0 && plcDevicesOxStatus>0) {
          let temperature=parseInt(newVal*13);
          if(temperature>1300) {
            temperature = 1300;
          }

          this.setOption(parseFloat(temperature));

        }else{
          this.setOption(0);
        }


      }
    },
    mounted() {
      window.onresize = () => {
        this.$store.dispatch('plc/setScreenWidth',document.body.clientWidth );//调取方法
      };
      this.echartsA = echarts.init(document.getElementById('mmm'));
      this.getData();

    },
    methods: {
      aaa() {
        this.getData([1, 1, 2, 2, 4, 4, 5, 5]);
      },
      getData(dd) {
        let plcDeviceStatus = this.$store.getters.plcData.od;
        let plcDevicesOxStatus = this.$store.getters.plcData.oxd;
        let data=[];
        if (plcDeviceStatus >0 && plcDevicesOxStatus>0) {
          let ssd=parseInt(this.$store.getters.plcData.od*13);
           data = dd || [ssd];
        }else{
           data = dd || [0];
        }
        this.setOption(data);
      },
      setOption(data) {
        let highlight = 'red';
        let sscolor='#fff';
        let demoData = [
          {
            name: '瞬时温度',
            //显示变化的值
            value: data,
            //  value: 1300,
            unit: '℃',
            pos: ['50%', '50%'],
            range: [0, 1400],
            colora: 'rgba(193,136,244,0.9)',
            colorb: 'rgba(242,36,90,0.6)'
          }

        ];
        let option = {
          borderWidth: '5',
          borderRadius: '5',
          //修改颜色
          backgroundColor: '#3b373b',
          title: {
            text: '瞬时温度',
            x: 'center',
            y: '7%',
            itemGap: 30,
            textStyle: {
              color: '#cdc7ff',
              fontFamily: '微软雅黑',
              fontSize: 25,
              fontWeight: 'bolder'
            }
          },
          series: (function () {
            var result = [];
            demoData.forEach(function (item) {
              if(isNaN(item.value)){
                item.value=0;
              }
              result.push(
                // 内侧指针、数值显示
                {
                  name: item.name,
                  type: 'gauge',
                  center: item.pos,
                  radius: '60%',
                  startAngle: 225,
                  endAngle: -45,
                  min: 0,
                  max: 1400,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 2,
                      color: [
                        [
                          1400, new echarts.graphic.LinearGradient(
                          0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgba(255,255,255,0)',
                          },
                            {
                              offset: 1,
                              color: '#014eca',
                            }
                          ]
                        )
                        ],
                        [
                          1, 'rgba(255,255,255, 0)'
                        ]
                      ]
                    }
                  },
                  axisTick: {
                    show: 0,
                  },
                  splitLine: {
                    show: 0,
                  },
                  axisLabel: {
                    show: 0
                  },
                  pointer: {
                    show: 0,
                  },
                  detail: {
                    show: 0
                  },
                  data: [{
                    value: item.value,
                  }]
                },
                // 外围刻度
                {
                  type: 'gauge',
                  center: item.pos,
                  radius: '50%', // 1行3个
                  splitNumber: item.splitNum || 10,
                  min: 0,
                  max: 1400,
                  startAngle: 225,
                  endAngle: -45,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 1,
                      color: [
                        [1, 'rgba(0,0,0,0)']
                      ]
                    }
                  }, //仪表盘轴线
                  axisTick: {
                    show: true,
                    lineStyle: {
                      color: 'rgba(255,255,255,0.6)',
                      width: 1
                    },
                    length: -6
                  }, //刻度样式
                  splitLine: {
                    show: true,
                    length: 5,
                    lineStyle: {
                      color: 'rgba(255,255,255,0.6)'
                    }
                  }, //分隔线样式
                  axisLabel: {
                    show: true,
                    distance: 2,
                    textStyle: {
                      color: sscolor,
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
                  },
                  pointer: {
                    show: 0
                  },
                  detail: {
                    show: 0
                  }
                },

                // 内侧指针、数值显示
                {
                  name: item.name,
                  type: 'gauge',
                  center: item.pos,
                  radius: '54%',
                  startAngle: 225,
                  endAngle: -45,
                  min: 0,
                  max: 1400,
                  axisLine: {
                    show: true,
                    lineStyle: {
                      width: 50,
                      color: [
                        [
                          item.value / 1400, new echarts.graphic.LinearGradient(
                          0, 0, 1, 0, [{
                            offset: 0,
                            color: 'rgba(0,0,0, 0)',
                          },
                            {
                              offset: 1,
                              color: item.colorb,
                            }
                          ]
                        )
                        ],
                        [
                          1, 'rgba(255,255,255, 0)'
                        ]
                      ]
                    }
                  },
                  axisTick: {
                    show: 0,
                  },
                  splitLine: {
                    show: 0,
                  },
                  axisLabel: {
                    show: 0
                  },
                  pointer: {
                    show: true,
                    length: '102%',
                    width: 8
                  },
                  title: {
                    show: false,

                  },
                  detail: {
                    show: true,
                    offsetCenter: [0, '65%'],
                    textStyle: {
                      fontSize: 25,
                      color: '#ff2c27'
                    },
                    formatter: [
                      '{value}' + (item.unit || ''),
                      /* '{name|' + item.name + '}'*/
                    ].join('\n'),

                    rich: {
                      name: {
                        fontSize: 20,
                        lineHeight: 10,
                        color: '#cd11dd',
                        padding: [30, 0, 0, 0]
                      }
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: highlight,
                    }
                  },
                  data: [{
                    value: item.value,
                    name: item.name
                  }]
                }
              );
            });

            return result;
          })()
        };

        this.echartsA.setOption(option);
      }
    }
  }

</script>

<style lang="scss" scoped>
  .echart-test {
    height: 380px;
    font-size: 16px;
    margin-top: 10px;
    border-radius: 5px;

  }

</style>
